<template>
  <div class="release-box">
    <el-form :model="subTask"
             label-width="auto"
             ref="form"
             :rules="rules">

      <div class="container-title">
        <img src="../../../assets/image/release-task.png" alt="" style="width: 150px">
      </div>
      <el-divider content-position="left"><strong>任务信息</strong></el-divider>
      <el-form-item label="任务名称" prop="taskname">
        <el-input data-testid="subtask-name" type="text" placeholder="请输入子任务名称" v-model="subTask.taskname"/>
      </el-form-item>
      <el-form-item label="测试类型" prop="type">
        <el-row type="flex">
          <el-select data-testid="subtask-type" v-model="subTask.type" placeholder="请选择测试类型">
            <el-option data-testid="subtask-type-func" label="功能测试" value="function_test"></el-option>
            <el-option label="性能测试" value="performance_test"></el-option>
            <el-option label="Bug探索" value="bug_explore"></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <el-form-item label="截止时间" prop="deadline">
        <el-row type="flex">
          <el-date-picker
              data-testid="subtask-time"
              v-model="subTask.deadline"
              type="datetime"
              placeholder="选择截止时间">
          </el-date-picker>
        </el-row>
      </el-form-item>
      <el-form-item label="报告单价" prop="price">
        <el-row type="flex">
          <el-input data-testid="subtask-price" placeholder="请输入每份报告的单价" v-model="subTask.price">
            <template slot="append">Collect币/份报告</template>
          </el-input>
        </el-row>
      </el-form-item>
      <el-form-item label="任务描述" prop="description">
        <el-input
            data-testid="subtask-description"
            type="textarea"
            :autosize="{ minRows: 4 }"
            placeholder="请在此处填写测试任务描述"
            maxlength="200"
            show-word-limit
            v-model="subTask.description">
        </el-input>
      </el-form-item>

      <div style="margin-top: 50px">
        <el-divider content-position="left"><strong>测试环境需求</strong></el-divider>
      </div>

      <device-requirements-edit v-model="subTask.deviceRequirement" ref="deviceRequirement"></device-requirements-edit>
    </el-form>


  </div>

</template>

<script>
import DeviceRequirementsEdit from "@/components/new/device-requirements-card/DeviceRequirementsEdit";
import {Debounce} from "@/utils/Debounce";


export default {
  name: "subTaskRelease",
  props:['subTask'],
  components: {DeviceRequirementsEdit},
  data() {
    return{
      rules: {
        type: [
          {required: true, message: '请选择测试类型'}
        ],
        deadline: [
          {required: true, message: '请选择截止时间'}
        ],
        price:[
          {required: true, message: '请填写报告单价'}
        ],
        description: [
          {required: true, message: '请填写任务描述', trigger: 'blur'}
        ]

      }
    };
  },
  methods:{
    onSubmit: Debounce(function (formName) {
      this.$confirm('确定设置该子任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs[formName].validate((valid) => {
          this.$refs['deviceRequirement'].validate((validRequirement) => {
            if (valid && validRequirement) {
              if ((new Date(this.subTask.deadline).getTime() - new Date().getTime()) / 86400000 < 1) {
                // 日期检查逻辑：至少比当前时刻多一天
                this.$message.error('截止时间过近，请重新选取！');
                return;
              }
              if(isNaN(this.subTask.price) || this.subTask.price%1!==0){
                //单价检查：必须为整数
                this.$message.error('您输入的报告单价不是整数，请重新设置');
                return;
              }
              else{
                if(this.subTask.price<=0){
                  //单价检查：必须>0
                  this.$message.error('您输入的报告单价需要为正数，请重新设置');
                  return;
                }
              }
              //alert('check done!')
              this.$emit('submitInfo',this.subTask);


            } else {
              this.$message.error('设置失败，请检查您的信息！')
              return false;
            }
          })

        });
      }).catch(() => {
      })
    }, 1000),




  }
}
</script>

<style scoped>
.release-box {
  border: 1px solid #DCDFE6;
  width: 500px;
  margin: 2% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 8px #909399;

  background-color: #f8f8f8;
}

</style>
